<!--
 * @Author: your name
 * @Date: 2020-07-29 15:24:55
 * @LastEditTime: 2020-08-20 22:56:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ryfront\src\modules\users\Index.vue
--> 
<template>
    <div>
        <el-row > 
            <el-breadcrumb separator=">">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item><b>用户列表</b></el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
        </el-row>
        
        <el-row>
            <!--搜索条件-->
            <el-row>
                <el-col :span="6">
                    <div style="float:left;">账号:</div>
                    <div style="float:left;">
                        <el-input v-model="userAccount" size="small" placeholder=""></el-input>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div style="float:left;">
                        邮箱:
                    </div>
                    <div style="float:left;">
                        <el-input v-model="userEmail" size="small" placeholder=""></el-input>
                    </div>
                </el-col>
            </el-row>
            <!--按钮组-->
            <el-row style="margin-top:20px;margin-bottom:20px;">
                <el-button type="success" size="small" @click="search" icon="el-icon-search" >搜索</el-button>
                <el-button size="small" icon="el-icon-refresh-right" @click="reset">重置</el-button>
                <el-button type="primary" size="small" @click="addUser" icon="el-icon-plus" >新增</el-button>
                <el-button type="warning" size="small" icon="el-icon-edit" >修改</el-button>
                <el-button type="danger"  size="small" icon="el-icon-delete" >删除</el-button>
                
            </el-row>
            <el-row>
                <el-table :data="tableList">
                <el-table-column label="账号" prop="userAccount"></el-table-column>
                <el-table-column label="邮箱" prop="userEmail"></el-table-column>
                <el-table-column label="联系方式" prop="userPhone"></el-table-column>
                <el-table-column label="最近登录时间" prop="user_last_login_time"></el-table-column>
                <el-table-column label="状态"  >
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.userStatus == '1'" type="success">正常</el-tag>
                        <el-tag v-else type="danger">停用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editUser(scope)" >编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </el-row>
            <el-row>
                <div style="float:right;">
                    <el-pagination
                        background
                        layout="total,prev, pager, next"
                        :page-size="pageSize"
                        :current-page="pageIndex"
                        :total="total"
                        >
                    </el-pagination>
                </div>
            </el-row>
           
        </el-row>

        <!--对话框 -->
        <el-dialog  :title="tip" :visible.sync="dialogVisible" width="40%" >
            <!--子组件 -->
            <Add v-show="dialogType == 1" @closeDialog="closeDialog"></Add>
            <Update v-show="dialogType == 2" :userDetails="userDetails"  @closeDialog="closeDialog" ></Update>
        </el-dialog>
                        
    </div>
</template>


<script>
import Add from './Add';
import Update from './Update';
import {userList} from '@/api/index';
export default {
    name:'usersList',
    components:{Add,Update},
    data(){
        return {
            tableList:[],//表格数据
            pageIndex: 1,
            pageSize: 10,
            total:0,
            userAccount: '',
            userEmail:'',
            tip:'提示',//对话框title
            dialogVisible: false,//对话框是否展示
            dialogType: 1,//弹出框类型 1新增  2修改  3删除 
            userDetails:{

            },
        }
    },
    mounted() {
        let obj = {
            pageIndex: 1,
            pageSize : 10
        }
        this.pageIndex = 1;
        this.pageSize = 10;
        this.showTableList(obj);
    },
    methods:{
        showTableList:function(obj){
            userList(obj).then((result) => {
              if(result.status == 200){
                  let data = result.data.data;
                  this.tableList = data.records;
                  this.pageIndex = data.current;
                  this.pageSize = data.size;
                  this.total = data.total
              }
            })
        },
        closeDialog(){
            this.dialogType = 3;
            this.dialogVisible = false;
        },
        editUser(scope){
            this.dialogType = 2;
            
            let obj = scope.row;
            this.userDetails = obj;

            this.dialogVisible = true;
        },
        addUser(){
            this.dialogType = 1;
            this.dialogVisible = true;
        },
        search(){
            let obj ={
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
                userEmail: this.userEmail,
                userAccount: this.userAccount
            };
            this.showTableList(obj);
        },
        //重置
        reset(){
            this.userAccount = "";
            this.userEmail = "";
        }
    },
    
}
</script>

<style scoped>
    
</style>